<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA | Main view</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
    <!--blueimp-->
    <link href="../css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">

    <!--awesome-->
    <link href="../css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <!--iCheck-->
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <!--chartist-->
    <link href="../css/plugins/chartist/chartist.min.css" rel="stylesheet">
    <!--c3-->
    <link href="../css/plugins/c3/c3.min.css" rel="stylesheet">
    <!--steps-->
    <link href="../css/plugins/steps/jquery.steps.css" rel="stylesheet">
    <!-- orris -->
    <link href="../css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!--dropzone-->
    <link href="../css/plugins/dropzone/basic.css" rel="stylesheet">
    <link href="../css/plugins/dropzone/dropzone.css" rel="stylesheet">

    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

</head>

<body onload="onloadIndexPage()" class="pace-done">

<div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong
                                    class="font-bold">David Williams</strong>
                             </span> <span class="text-muted text-xs block">Art Director <b
                                    class="caret"></b></span> </span> </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a href="#">Logout</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        IN+
                    </div>
                </li>
                <li class="active">
                    <a href="javascript:void(0);" attr-href="index"></i> <span class="nav-label">Main view</span></a>
                </li>
                <li>
                    <a href="javascript:void(0);" attr-href="minor"><i class="fa fa-th-large"></i> <span
                            class="nav-label">Minor view</span> </a>
                </li>
                <li>
                    <a href="javascript:void(0);" attr-href="backpage"><i class="fa fa-th-large"></i> <span
                            class="nav-label">backPage view</span> </a>
                </li>


            </ul>

        </div>
    </nav>


    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <img src="../img/angular_logo.png">
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <a href="#">
                            <i class="fa fa-sign-out"></i> Log out
                        </a>
                    </li>
                </ul>

            </nav>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-center m-t-lg">
                        <h1>
                            Welcome in INSPINIA Static SeedProject
                        </h1>
                        <small>
                            It is an application skeleton for a typical web app. You can use it to quickly bootstrap
                            your webapp projects and dev environment for these projects.
                        </small>
                    </div>
                </div>
            </div>
            <div class="loadPage"></div>


        </div>


        <div class="footer">
            <div class="pull-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company &copy; 2014-2015
            </div>
        </div>

    </div>
</div>

<!--adsbygoogle-->
<!--<script async src="../js/demo/googlegg.js"></script>-->

<!--showMenu-->
<script src="../js/plugins/menu/showmenu.js"></script>

<!-- Mainly scripts -->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/jquery-ui-1.10.4.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/inspinia.js"></script>

<!--menu plugins-->
<script src="../js/plugins/menu/accordion.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Morris -->
<script src="../js/plugins/morris/raphael-2.1.0.min.js"></script>
<script src="../js/plugins/morris/morris.js"></script>

<!-- Custom and plugin javascript -->
<script src="../js/plugins/pace/pace.min.js"></script>

<!--iCheck-->
<script src="../js/plugins/iCheck/icheck.min.js"></script>

<!-- Sparkline -->
<script src="../js/plugins/sparkline/jquery.sparkline.min.js"></script>

<!--flot-->
<script src="../js/plugins/flot/jquery.flot.js"></script>
<script src="../js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="../js/plugins/flot/jquery.flot.resize.js"></script>
<script src="../js/plugins/flot/jquery.flot.pie.js"></script>
<script src="../js/plugins/flot/jquery.flot.time.js"></script>
<!--blueimp-->
<script src="../js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>

<!--rickshaw-->
<script src="../js/plugins/rickshaw/vendor/d3.v3.js"></script>
<script src="../js/plugins/rickshaw/rickshaw.min.js"></script>

<!--c3-->
<script src="../js/plugins/d3/d3.min.js"></script>
<script src="../js/plugins/c3/c3.min.js"></script>

<!--chartist-->
<script src="../js/plugins/chartist/chartist.min.js"></script>

<!--chartJs-->
<script src="../js/plugins/chartJs/Chart.min.js"></script>

<!-- Steps -->
<script src="../js/plugins/staps/jquery.steps.min.js"></script>
<!--validate-->
<script src="../js/plugins/validate/jquery.validate.min.js"></script>
<!--dropzone-->

<script>
	function keepActive(){
        $("#side-menu").accordion({
            speed: 200
        });
        $("#side-menu li").bind("click",function(){
            var attr=$(this).find("a").attr("attr-href");
            $(".loadPage").load("../page/"+attr+".html");
            return false;
        });
	}


	function onloadIndexPage(){
	    $(".loadPage").load("../page/index.html");
	    $.ajax({
				url: "menuConfigRest",
				type: 'GET',
				dataType:'json',
				cache: false,
				success: function(data){
                    console.log("getMenuList success!");
                    console.log("data:"+data);
				   OnloadInitMenu(data,"side-menu");
                    keepActive();
				},
				error:function(){
					console.log(" getMenuList error!");
				}
        });
	}
</script>
</body>
</html>
